<template>
  <div>
    <el-card>
      <el-button type="primary" @click="exportForm">导出</el-button>
      <el-table :data="reportlistTable" style="width: 2800px">
        <el-table-column prop="empName" label="姓名" width="90"></el-table-column>
        <el-table-column prop="attendanceTime" label="考勤月份" width="90"></el-table-column>
        <el-table-column prop="workDays" label="应出勤天数" width="90"></el-table-column>
        <el-table-column prop="daKaWorkDays" label="打卡出勤" width="90"></el-table-column>
        <el-table-column prop="noAttenCountToBeOneDay" label="缺卡扣考勤" width="90"></el-table-column>
        <el-table-column prop="lateCount" label="迟到次数" width="90"></el-table-column>
        <el-table-column prop="lateCountToBeOneDay" label="迟到扣出勤" width="90"></el-table-column>
        <el-table-column prop="noWorkDays" label="矿工天数" width="90"></el-table-column>
        <el-table-column prop="deduckDays" label="考勤扣天数" width="90"></el-table-column>
        <el-table-column prop="lateSalary" label="迟到扣钱" width="90"></el-table-column>
        <el-table-column prop="realWorkDays" label="实际出勤" width="90"></el-table-column>
        <el-table-column prop="baseSalary" label="基本工资" width="90"></el-table-column>
        <el-table-column prop="realSalary" label="出勤工资" width="90"></el-table-column>
        <el-table-column prop="performanceSalary" label="绩效工资" width="90"></el-table-column>
        <el-table-column prop="attendanceLevel" label="绩效等级" width="90"></el-table-column>
        <el-table-column prop="attendanceLevelFactor" label="考勤系数" width="90"></el-table-column>
        <el-table-column prop="attendanceSalary" label="考勤工资" width="90"></el-table-column>
        <el-table-column prop="workAge" label="工龄" width="90"></el-table-column>
        <el-table-column prop="workAgeMoeny" label="工龄工资" width="90"></el-table-column>
        <el-table-column prop="shouldSalary" label="应发工资" width="90"></el-table-column>
        <el-table-column prop="isWorkAllDay" label="是否全勤" width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.isWorkAllDay">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      reportlistTable: null
    };
  },
  created() {
    this.getAllReport();
  },
  methods: {
    async getAllReport() {
      var result = await this.$httpd.get("/AttendanceReport/GetAttReqpors");
      if (result.status != 200) {
        this.$message.error("获取钉钉信息出错");
        return;
      }
      this.reportlistTable = result.data.data;
    },
    async exportForm() {
      //responseType默认是json,下载文件的时候改位arraybuffer
      var result = await this.$httpd.get("/AttendanceReport/Export", {
        responseType: "arraybuffer"
      });

      const content = result.data;
      const blob = new Blob([content], { type: "application/vnd.ms-excel" }); //构造一个blob对象来处理数据
      const fileName = "个人薪资表.xlsx";
      if ("download" in document.createElement("a")) {
        //支持a标签download的浏览器
        const link = document.createElement("a"); //创建a标签
        link.download = fileName; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
      } else {
        //其他浏览器
        navigator.msSaveBlob(blob, fileName);
      }
    }
  }
};
</script>